<template>
  <div class="common-layout" style="height: 100%; width: 100%;">
    <el-container>
      <el-header>
      <Header/>
    </el-header>
      <el-container style="margin-top: 40px;">
      <el-aside width="300px">
          <Menu/>
        </el-aside>

        <el-main style="padding: 0;margin: 0">
          <div style="width: 90%; padding: 0;margin: 0">
<!--            <CourseHeader/>-->
            <CourseList/>
          </div>

        </el-main>
<!--        <div style="width: 30%;">-->
<!--          <el-calendar v-model="value" />-->
<!--        </div>-->

      </el-container>
    </el-container>
  </div>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import CourseHeader from "@/components/admin/CourseHeader.vue"
import CourseList from '@/components/admin/CourseList.vue'
import Header from '@/components/admin/Header.vue'
import Menu from '@/components/admin/Menu.vue'
const value = ref(new Date())
const form = reactive({
  cname: '',
  cteacher: '',
  date2: '',
  delivery: false,
  type: '',
  resource: '',
  desc: '',
})

</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
.router-link-active {
  text-decoration: none;
  color: #00CC7E;
}
a{
  text-decoration: none;
}

</style>